<template>
    <div class="Registration">
        <div class="main_left">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">居民</el-menu-item>
                <el-menu-item index="2" disabled>房产</el-menu-item>
                <el-menu-item index="3" disabled>设施</el-menu-item>
            </el-menu>
            <div class="line"></div>
            <div style="padding: 20px">
                <el-form ref="residentForm" :model="residentForm" :rules="residentFormRules" label-width="80px">
                    <el-form-item label="手机号"  prop="tel">
                        <el-input v-model="residentForm.tel" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码"  prop="password">
                        <el-input v-model="residentForm.password" type="password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="idCard">
                        <el-input v-model="residentForm.idCard" placeholder="请输入身份证号"></el-input>
                    </el-form-item>
                    <el-form-item label="生日" prop="birthday">
                        <el-date-picker
                                v-model="residentForm.birthday"
                                type="date"
                                style="width: 270px"
                                placeholder="请选择生日">
                        </el-date-picker>
<!--                        <el-input v-model="residentForm.birthday" placeholder="请输入生日"></el-input>-->
                    </el-form-item>
                    <el-form-item label="地区"  prop="address" >
                        <el-input v-model="residentForm.address" placeholder="请输入地区信息"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名"  prop="name">
                        <el-input v-model="residentForm.name" placeholder="请输入输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="角色"  prop="role">
                        <el-select v-model="residentForm.role" placeholder="选择角色" value="" style="width: 270px">
                            <el-option
                                    v-for="item in options3"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="0px">
                        <el-button type="primary" style="width: 300px;height: 38px;" @click="register">注册</el-button>
                    </el-form-item>
                </el-form>
                <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible"
                        width="30%"
                       >
                    <img :src="icon">
                </el-dialog>
            </div>
        </div>
        <div class="main_right">
            <div class="main_right_top">
                <div class="aa">
                    <span class="title">居民信息列表</span>
<!--                    <span class="box1">批量操作</span>-->
<!--                    <span  class="box1">已选1项</span>-->
                    <div class="del">
                        <img src="../assets/img/Registration_img/del.png" alt="">
                        <span>删除</span>
                    </div>
                    <div class="download">
                        <img src="../assets/img/Registration_img/download.png" alt="">
                        <span>下载</span>
                    </div>
                </div>
                <div class="select" style="margin-right: 20px;display: flex">
<!--                    <el-select v-model="value" placeholder="选择地区" value="">-->
<!--                        <el-option-->
<!--                                v-for="item in options"-->
<!--                                :key="item.value"-->
<!--                                :label="item.label"-->
<!--                                :value="item.value">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
                    <el-input v-model="userIdInput" placeholder="请输入id"></el-input>
                    <el-button type="primary" @click="searchUser">查询</el-button>
                </div>
            </div>
            <hr/>

            <div style="display: flex;padding: 10px ;flex-direction: column">
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        style="width: 100%"
                        tooltip-effect="dark"
                        :header-cell-style="{background:'#F3F4F7',color:'#555',height:'5px'}"
                        :header-row-style="{height:'5pz'}"
                        max-height="700"
                >
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="姓名">
                        <template slot-scope="scope">{{ scope.row.name }}</template>
                    </el-table-column>
                    <el-table-column
                            prop="idCard"
                            label="身份证号">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地区信息"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="tel"
                            label="电话"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="operation"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
                            <el-button type="text" @click="ViewDode(scope.row)">查看家园码</el-button>
                            <el-button type="text" @click="showPass(scope.row)">修改密码</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-dialog
                        title="提示"
                        :visible.sync="homeCode"
                        width="30%"
                >
                    <img :src="icon2">
                </el-dialog>
                <el-dialog  :visible.sync="dialogFormVisible" >
                    <el-form :model="userForm" label-width="100px">
                        <el-form-item label="手机号" >
                            <el-input v-model="userForm.tel" autocomplete="off" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号" >
                            <el-input v-model="userForm.idCard" autocomplete="off" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="生日" >
                            <el-input v-model="userForm.birthday" autocomplete="off" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="地区" >
                            <el-input v-model="userForm.address" autocomplete="off" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名" >
                            <el-input v-model="userForm.name" autocomplete="off" style="width: 300px"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="editOk">确 定</el-button>
                    </div>
                </el-dialog>
                <el-dialog  :visible.sync="changPass" >
                    <el-form :model="passForm" label-width="100px">
                        <el-form-item label="电话" >
                            <el-input v-model="passForm.tel" autocomplete="off" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="旧密码" >
                            <el-input v-model="passForm.oldPassword" autocomplete="off" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" >
                            <el-input v-model="passForm.newPassword" autocomplete="off" style="width: 300px"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="changePassword">确 定</el-button>
                    </div>
                </el-dialog>
                <el-pagination
                        style="align-self: flex-end;justify-self: self-end"
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        layout="total, sizes, prev, pager, next, jumper"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="10"
                        :total="totalElements">
                </el-pagination>
            </div>

        </div>
    </div>
</template>

<script>
    import {get,post} from '../utils/request'
    import qs from 'qs'
    // import axios from 'axios'
    export default {
        name: "Registration",
        data() {
            return {
                userIdInput: '',
                changPass:false,
                passForm:{
                    tel:'',
                    oldPassword:'',
                    newPassword:'',
                },
                icon2:'',
                homeCode:false,
                id:'',
                userForm:{},
                dialogFormVisible:false,
                totalElements:0,
                pageSize:'10',
                pageNumber:'1',
                icon: '',
                dialogVisible: false,
                tableData: [],
                activeIndex: '1',
                residentForm: {
                    tel:'',
                    password:'',
                    idCard:'',
                    birthday:'',
                    address:'',
                    name: '',
                    role:'',
                },
                residentFormRules:{
                    tel:[
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur' }
                    ],
                    password:[
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ],
                    idCard:[
                        { required: true, message: '请输入身份证', trigger: 'blur' },
                    ],
                    address:[
                        { required: true, message: '请输入地区信息', trigger: 'blur' },
                    ],
                    birthday:[
                        { required: true, message: '请选择生日', trigger: 'change' },
                    ],
                    name:[
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                    ],
                    role:[
                        { required: true, message: '请选择角色', trigger: 'change' },
                    ]
                },
                options3: [
                    {
                        value: '选项1',
                        label: '用户'
                    }, {
                        value: '选项2',
                        label: '物业'
                    }, {
                        value: '选项3',
                        label: '政府'
                      }
                    ],
                value: '',
            };
        },
        mounted(){

        this.getUserList()
        },
        methods: {
            getUserList(){
                get('/findAllUser',{
                    pageSize:this.pageSize,
                    pageNumber:this.pageNumber,
                }).then(res=>{
                    // console.log(res)
                    // console.log(res.data.content)
                    this.tableData=res.data.content
                    this.totalElements=res.data.totalElements
                })
            },

            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            //注册
            register(){
                post( '/userRegister',qs.stringify(this.residentForm)).then(res=>{
                    if(res.data===''){
                        this.$message.error('用户已存在');
                    }
                    else{
                        this.icon=res.data
                        this.dialogVisible = true
                        this.getUserList()
                    }
                })
            },
            //修改每页条数
            handleSizeChange(val) {
                this.pageSize = val
            },
            //获取用户列表
            handleCurrentChange(val) {
                this.pageNumber=val
                get('/findAllUser',{
                    pageSize:this.pageSize,
                    pageNumber:this.pageNumber,
                }).then(res=>{
                    // console.log(res)
                    // console.log(res.data.content)
                    this.tableData=res.data.content
                    this.totalElements=res.data.totalElements
                })
            },
            //编辑
            edit(row){
                 this.id = row.id
                // console.log(row)
                this.dialogFormVisible=true
                get('/findUserByIdFromDataBase',{
                    userId:row.id,
                }).then(res=>{
                    // console.log(res)
                    this.userForm = res.data
                    this.getUserList()
                })
            },
            //修改
            editOk(){
                this.dialogFormVisible=false
                // console.log(row)
                get('/userinfoModify',{
                    userId:this.id,
                    tel:this.userForm.tel,
                    birthday:this.userForm.birthday,
                    address:this.userForm.address,
                    name:this.userForm.name,
                    idCard:this.userForm.idCard,
                }).then(res=>{
                    // console.log(res)
                    this.$message({
                        message: res.data,
                        type: 'success'
                    });
                    this.getUserList()
                })
            },
            //查看家园码
            ViewDode(row){
                this.homeCode = true
                get('/findUserCodeById',{
                    userId:row.id
                }).then(
                    res=>{
                        this.icon2=res.data
                    }
                )
            },
            //修改密码
            showPass(){
              this.changPass = true
            },
            changePassword(){
               get('/userPasswordModify',this.passForm).then(res=>{
                   // console.log(res)
                   this.$message({
                       message: res.data,
                       type: 'success'
                   });
               })
            },
            //查询用户
            searchUser(){
                get('/findUserByIdFromDataBase',{
                    userId:this.userIdInput
                }).then(res=>{
                    // console.log(res)
                    // console.log(res.data)
                    this.tableData.length=0
                    this.tableData.push(res.data)
                    // this.list= res.data
                })
            }

      }
    }
</script>

<style scoped lang="less">

    .Registration {
        background-color: #E9EEF3;
        color: #333;
        display: flex;
        justify-content: space-between;
        .main_left{
            width: 390px;
            height: 822px;
            opacity: 1;
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.06);
            .el-menu-demo{
                display: flex;
                justify-content: space-around;
            }
            /deep/.el-form-item__label{
                width: 28px;
                height: 20px;
                opacity: 1;
                font-size: 14px;
                font-family: PingFang SC, PingFang SC-Regular;
                font-weight: 400;
                text-align: left;
                color: #000000;
            }
        }
        .main_right{
            width: 1230px;
            height: 822px;
            opacity: 1;
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.06);
            /*display: flex;*/
            /*flex-direction: column;*/
            .main_right_top{
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .aa{
                    width: 500px;
                    display: flex;
                    justify-content: space-around;
                    .del{
                        display: flex;
                        align-items: center;
                    }
                    .download{
                        display: flex;
                        align-items: center;
                    }
                }
                .title{
                    width: 84px;
                    opacity: 1;
                    font-size: 14px;
                    font-weight: 700;
                    text-align: left;
                    color: #000000;
                }
            }
            /deep/.el-table__header tr,
            /deep/.el-table__header th {
                padding: 0;
                height: 60px;
            }
            /deep/.el-dialog{
                width: 600px;
            }
        }
    }

</style>
